import React, { PureComponent } from 'react'
import { withRouter } from 'react-router-dom'
import PropTypes from 'prop-types'
import css from './index.module.scss'
import ResponsiveImage from '@/components/ResponsiveImage'
class Album extends PureComponent {
    static propTypes = {
        id: PropTypes.oneOfType([
            PropTypes.number,
            PropTypes.string
        ]),
        type: PropTypes.string,
        title: PropTypes.string,
        pic: PropTypes.string,
        area: PropTypes.string,
        actor: PropTypes.string,
        director: PropTypes.string
    }

    formatContent = value => {
        return value ? value.replace(/[\t\n]/g, ',') : ''
    }

    handleDetail = () => {
        this.props.history.push(`/bangumi/ss${this.props.id}`)
    }

    render() {
        const { pic, title, type, area, actor, director } = this.props
        return (
            <div className={`${css['wrap']}`} onClick={this.handleDetail}>
                <div className={css['cover']}>
                    <ResponsiveImage                             
                        src={pic}
                        size="@156w_208h_1c"
                        className={css['cover-img']}
                    >
                    </ResponsiveImage>
                </div>
                <div className={css["content"]}>
                    <div className={css["type"]}>
                        <i className="fa fa-tv"></i> {type}
                    </div>
                    <div className={css["title"]} dangerouslySetInnerHTML={{__html: title}}></div>
                    { area && <div className={css["area"]}>地区：{ area }</div> }
                    { actor && <div className={css["actor"]}>演员：{ this.formatContent(actor) }</div> }
                    { director && <div className={css["director"]}>导演：{ this.formatContent(director) }</div> }
                </div>
            </div>
        )
    }
}
export default withRouter(Album)